﻿@namespace BootstrapBlazor.Components
@typeparam TItem
@inherits TableBase<TItem>

<div class="table-container" @ref="TableWrapper">
    <div class="table-toolbar">
        @if (ShowToolbar)
        {
            <TableToolbar>
                @if (ShowDefaultButtons)
                {
                    <TableToolbarButton Color="Color.Success" OnClick="@AddAsync" ButtonIcon="fa fa-plus" ButtonText="新建" />
                    <TableToolbarPopconfirmButton Color="Color.Danger" OnBeforeClick="@ConfirmDelete" OnConfirm="@DeleteAsync" />
                    <TableToolbarButton Color="Color.Primary" OnClick="@Edit" ButtonIcon="fa fa-pencil" ButtonText="编辑" />
                }
                @TableToolbarTemplate
            </TableToolbar>
            @if (ShowRefresh)
            {
                <div class="float-right table-toolbar-button table-column-right">
                    <button class="btn btn-secondary" type="button" title="刷新" @onclick="@QueryAsync">
                        <i class="fa fa-refresh"></i><span class="d-none d-sm-inline-block">刷新</span>
                    </button>
                </div>
            }
        }
        @if (ShowSearch)
        {
            <div class="float-right table-toolbar-button btn-group">
                <div class="input-group">
                    <BootstrapInput TItem="string" class="table-toolbar-search" placeholder="搜索" @bind-Value="@SearchText" @onkeyup="@OnKeyUp">
                        <Tooltip Placement="Placement.Top" Title="@SearchTooltip" IsHtml="true" />
                    </BootstrapInput>
                    <div class="input-group-append">
                        <button class="btn btn-secondary" type="button" title="搜索" @onclick="@SearchClick">
                            <i class="fa fa-search"></i><span class="d-none d-sm-inline-block">搜索</span>
                        </button>
                        <button class="btn btn-secondary" type="button" title="清空过滤" @onclick="@ClearSearchClick">
                            <i class="fa fa-trash"></i><span class="d-none d-sm-inline-block">清空过滤</span>
                        </button>
                        @if (ShowAdvancedSearch)
                        {
                            <button class="@AdvanceSearchClass" type="button" title="高级搜索" @onclick="@AdvancedSearchClick">
                                <i class="fa fa-search-plus"></i><span class="d-none d-sm-inline-block">高级搜索</span>
                            </button>
                        }
                    </div>
                </div>
            </div>
        }
    </div>

    <TableColumnCollection OnSortAsync="@OnSortAsync" OnFilterAsync="@OnFilterAsync">
        <div class="@WrapperClassName" style="@WrapperStyleName">
            <table class="@ClassName">
                @TableColumns?.Invoke(HeaderModel)
                <colgroup>
                    @if (ShowCheckbox)
                    {
                        @if (ShowCheckboxText)
                        {
                            <col width="80" />
                        }
                        else
                        {
                            <col width="36" />
                        }
                    }
                    <TableColumnContent />
                    @if (ShowExtendButtons)
                    {
                        <col width="@ExtendButtonColumnWidth" />
                    }
                </colgroup>
                <tbody>
                    @if (Items != null)
                    {
                        @for (int index = 0; index < Items.Count(); index++)
                        {
                            <tr>
                                @if (ShowCheckbox)
                                {
                                    <td>
                                        <div class="table-cell">
                                            <Checkbox TItem="TItem" Value="@Items.ElementAt(index)" State="@RowCheckState(Items.ElementAt(index))" OnStateChanged="@OnCheck"></Checkbox>
                                        </div>
                                    </td>
                                }
                                <TableBodyContent TItem="TItem" Item="@Items.ElementAt(index)" />
                                @if (ShowExtendButtons)
                                {
                                    <td>
                                        <div class="table-cell">
                                            <div class="btn-group">
                                                @if (ShowDefaultButtons)
                                                {
                                                    <TableCellButton TItem="TItem" Size="Size.ExtraSmall" Item="@Items.ElementAt(index)" OnClickCallback="@(e => ClickButton(e))">
                                                        <i class='fa fa-edit'></i>
                                                        <span>编辑</span>
                                                    </TableCellButton>
                                                    <TableCellConfirmButton TItem="TItem" Placement="Placement.Left" Size="Size.ExtraSmall" Item="@Items.ElementAt(index)" Color="Color.Danger" ButtonText="删除" OnClickCallback="@(e => ClickDeleteButton(e))" OnConfirm="@DeleteAsync" />
                                                }
                                                @RowButtonTemplate?.Invoke(Items.ElementAt(index))
                                            </div>
                                        </div>
                                    </td>
                                }
                            </tr>
                        }
                    }
                </tbody>
                <thead>
                    <tr>
                        @if (ShowCheckbox)
                        {
                            <th class="@CheckboxColumnClass">
                                <div class="table-cell">
                                    <Checkbox TItem="TItem" @ref="@HeaderCheckbox" DisplayText="@CheckboxDisplayTextString" State="@HeaderCheckState()" OnStateChanged="@OnHeaderCheck"></Checkbox>
                                </div>
                            </th>
                        }
                        <TableHeaderContent SortIcon="@SortIcon" SortIconAsc="@SortIconAsc" SortIconDesc="@SortIconDesc" />
                        @if (ShowExtendButtons)
                        {
                            <th class="@ButtonColumnClass">
                                <div class="table-cell is-button-column">
                                    @ColumnButtonTemplateHeaderText
                                </div>
                            </th>
                        }
                    </tr>
                </thead>
                @if (ShowFooter)
                {
                    <tfoot>
                        <tr>@TableFooter</tr>
                    </tfoot>
                }
            </table>
        </div>

        @if (TotalCount > 0 && IsPagination)
        {
            <div class="table-pagination">
                <Pagination PageItemsSource="@PageItemsSource" PageItems="@PageItems" TotalCount="@TotalCount" PageIndex="@PageIndex" OnPageClick="@OnPageClick" OnPageItemsChanged="@OnPageItemsChanged"></Pagination>
            </div>
        }

        <div class="table-filter">
            <TableFilterContent />
        </div>

    </TableColumnCollection>

    @if (OnSaveAsync != null || OnAddAsync != null)
    {
        <Modal @ref="EditModal">
            <ModalDialog Title="@EditModalTitleString" Size="@Size.ExtraLarge" IsCentered="true">
                <BodyTemplate>
                    <ValidateForm @ref="@ValidateForm" Model="@EditModel" OnValidSubmit="@Save">
                        @EditTemplate?.Invoke(EditModel)
                    </ValidateForm>
                </BodyTemplate>
                <FooterTemplate>
                    <button type="button" class="btn btn-primary" @onclick="e => ValidateForm?.Validate()">
                        <i class="fa fa-save"></i>
                        <span>保存</span>
                    </button>
                </FooterTemplate>
            </ModalDialog>
        </Modal>
    }

    @if (ShowSearch && ShowAdvancedSearch)
    {
        <Modal @ref="@SearchModal">
            <ModalDialog Title="查询条件" Size="@Size.Large" ShowCloseButton="false" IsCentered="true">
                <BodyTemplate>
                    <ValidateForm Model="@SearchModel">
                        @SearchTemplate?.Invoke(SearchModel)
                    </ValidateForm>
                </BodyTemplate>
                <FooterTemplate>
                    <button type="button" class="btn btn-info" data-dismiss="modal" @onclick="@ResetSearchClick">
                        <i class="fa fa-trash-o"></i>
                        <span>重置</span>
                    </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" @onclick="@SearchClick">
                        <i class="fa fa-search"></i>
                        <span>查询</span>
                    </button>
                </FooterTemplate>
            </ModalDialog>
        </Modal>
    }
</div>
